<template>
    <div id="student-skills-chart" style="width: 100%; height: 500px;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    mounted() {
      this.renderChart();
    },
    methods: {
      renderChart() {
        const chartDom = document.getElementById('student-skills-chart');
        const myChart = echarts.init(chartDom);
  
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            data: ['Java', 'C++', '前端', 'Python', '数据分析', '人工智能', '区块链', '网络安全', 'UI/UX设计', '其他']
          },
          series: [
            {
              name: '技能热度',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],
              label: {
                position: 'inner',
                fontSize: 14
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 1548, name: 'Java' },
                { value: 775, name: 'C++' },
                { value: 679, name: '前端', selected: true },
                { value: 548, name: 'Python' },
                { value: 458, name: '数据分析' },
                { value: 348, name: '人工智能' },
                { value: 248, name: '区块链' },
                { value: 158, name: '网络安全' },
                { value: 98, name: 'UI/UX设计' },
                { value: 78, name: '其他' }
              ]
            },
            {
              name: '公司需求',
              type: 'pie',
              radius: ['45%', '60%'],
              labelLine: {
                length: 30
              },
              label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                rich: {
                  a: {
                    color: '#6E7079',
                    lineHeight: 22,
                    align: 'center'
                  },
                  hr: {
                    borderColor: '#8C8D8E',
                    width: '100%',
                    borderWidth: 1,
                    height: 0
                  },
                  b: {
                    color: '#4C5058',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 33
                  },
                  per: {
                    color: '#fff',
                    backgroundColor: '#4C5058',
                    padding: [3, 4],
                    borderRadius: 4
                  }
                }
              },
              data: [
                { value: 2048, name: '百度' },
                { value: 3100, name: '阿里巴巴' },
                { value: 3251, name: '腾讯' },
                { value: 6147, name: '美团' },
                { value: 3152, name: '字节跳动' }
              ]
            }
          ]
        };
  
        option && myChart.setOption(option);
      }
    }
  };
  </script>
  